<template>
	<div class="comment_item">
		<el-avatar :size="48" :src="defaultAvatar"></el-avatar>
		<dl class="content">
			<dt>
				<h2 @click="handleExpandReply">
					<template v-if="type === '11'">书籍：《{{ resObject.name }}》</template>
					<template v-else>匿名用户</template>
				</h2>
				<el-rate v-model="commentInfo.score" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
				<el-button type="danger" size="small" @click="handleDeleteComment(commentInfo.id)">删除</el-button>
			</dt>
			<dd class="cnt" v-model="commentInfo.content"></dd>
			<dd class="bot">
				<span>{{ commentInfo.createTime }}</span>
				<el-button type="text" @click="handleExpandReply">
					<i class="el-icon-chat-dot-round"></i>
					回复({{ commentInfo.childList.length }})
					<i :class="!isExpand ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
				</el-button>
			</dd>
			<dd class="reply" v-if="isExpand">
				<p v-for="(item, index) in commentInfo.childList">
					<el-avatar :size="24" :src="defaultAvatar"></el-avatar>
					{{ item.content }}
					<el-button type="text" @click="handleDeleteComment(item.id)">删除</el-button>
				</p>
			</dd>
		</dl>
	</div>
</template>

<script>
import moment from 'moment';
import { sysEvaluateDelete } from '@/api/admin/comment';
export default {
	props: {
		data: {
			type: Object,
			default() {
				return {};
			}
		},
		type: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			isExpand: false,
			defaultAvatar: require('@/assets/defaultAvatar.png')
		};
	},
	computed: {
		commentInfo() {
			return { ...this.data, score: parseFloat(this.data.score || 0), createTime: moment(this.data.createTime).format('YYYY-MM-DD') };
		},
		resObject() {
			return this.commentInfo.resObj || {};
		}
	},
	methods: {
		handleExpandReply() {
			if (this.commentInfo.childList.length > 0) {
				this.isExpand = !this.isExpand;
			} else {
				this.isExpand = false;
			}
		},

		//删除评价
		handleDeleteComment(id) {
			let that = this;
			this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteCommentRequest(id);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除评论请求
		async deleteCommentRequest(id) {
			let result = await sysEvaluateDelete(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('评论删除成功');
				this.$parent.getCommentListData();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.comment_item {
	display: flex;
	align-items: flex-start;
	padding: 15px 15px 5px;
	border: solid 1px #eee;
	margin-top: 15px;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	&:first-child {
		margin-top: 0;
	}
	.el-avatar {
		margin-right: 15px;
	}
	dl.content {
		flex: 1;
		overflow: hidden;
	}
	dt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		h2 {
			flex: 1;
			font-size: 18px;
			overflow: hidden;
			cursor: pointer;
		}
		.el-button {
			margin-left: 20px;
		}
	}
	dd.cnt {
		padding: 10px 0;
	}
	dd.bot {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		line-height: 1;
		padding-bottom: 10px;
		.el-button {
			padding: 0;
			margin-left: 20px;
		}
		span {
			color: #999;
		}
	}
	dd.reply {
		border-top: dashed 1px #eee;
		p {
			display: flex;
			align-items: flex-start;
			padding: 10px 0;
			line-height: 24px;
		}
		.el-button--text {
			padding: 4px;
		}
	}
}
</style>
